<template>
    <div class="divpoint-img-box" :class="{ z1: hoverTableVisible }">
        <img
            class="divpoint-img divpoint-img-normal"
            :src="img"
            @click="handlerClick"
            @mouseenter="handlerMouseEnter"
            @mouseleave="handlerMouseLeave"
        />
        <div class="divpoint-img-table" v-show="hoverTableVisible && tableInfo.length">
            <table class="info-table">
                <tr v-for="(item, index) in tableInfo" :key="index">
                    <td>{{ item.label }}</td>
                    <td>{{ item.value }}</td>
                </tr>
            </table>

            <div class="cesium-popup-tip"></div>
        </div>
        <video-dialog
            v-if="videoDialog.visible"
            :visible.sync="videoDialog.visible"
            :src="videoDialog.data"
            :title="videoDialog.title"
            :camera-index-code="videoDialog.cameraIndexCode"
        />
        <table-dialog :visible.sync="infoDialog.visible" :data="infoDialog.data" />
    </div>
</template>

<script>
import { MonitorMap, MonitorType } from "@/view/client/component/TheCesiumMap/data";
import { WarnLevelType, WarnType } from "@/public/global/enum";
import { getLatestDataByMonitorCode, FetchRealRtsp, FetchWarningManageById } from "@/api";
import VideoDialog from "./VideoDialog";
import TableDialog from "./TableDialog";

export default {
    name: "DivPint",
    components: {
        VideoDialog,
        TableDialog,
    },
    data() {
        return {
            hoverTableVisible: false,
            info: {},
            tableInfo: [],
            infoDialog: {
                visible: false,
                data: {},
            },
            videoDialog: {
                visible: false,
                data: "",
                title: "",
                cameraIndexCode: "",
            },
        };
    },
    computed: {
        img() {
            const monitor = MonitorMap[this.info.monitorTypeId];
            const matchList = [
                {
                    img: monitor.icon,
                    match: () => this.info.warnType === WarnType.Normal,
                },
                {
                    img: monitor.dangerIcon3,
                    match: () =>
                        this.info.warnType === WarnType.OffLine ||
                        this.info.warnLevel === WarnLevelType.Three,
                },
                {
                    img: monitor.dangerIcon,
                    match: () => this.info.warnLevel === WarnLevelType.One,
                },
                {
                    img: monitor.dangerIcon2,
                    match: () => this.info.warnLevel === WarnLevelType.Two,
                },
                {
                    img: monitor.dangerIcon4,
                    match: () => this.info.warnLevel === WarnLevelType.Four,
                },
                {
                    img: monitor.icon,
                    match: () => true,
                },
            ];
            return matchList.find((item) => item.match()).img;
        },
    },
    methods: {
        handlerMouseEnter() {
            if (this.info.monitorTypeId === MonitorType.Video) {
                return;
            }
            this.hoverTableVisible = true;
            this.getLatestDataByMonitorCode();
        },
        handlerMouseLeave() {
            this.hoverTableVisible = false;
        },
        async $_addDangerLabel() {
            const data = await FetchWarningManageById({ id: this.info.id });
            if (!data) {
                return;
            }
            this.infoDialog = {
                visible: true,
                data: {
                    ...this.info,
                    ...data,
                },
            };
        },
        handlerClick() {
          if(this.info.monitorTypeId !== MonitorType.Video){
            return;
          }
            if (this.info.warnType !== WarnType.Normal) {
                this.$_addDangerLabel();
            } else {
                if (this.info.monitorTypeId === MonitorType.Video) {
                  FetchRealRtsp({
                        cameraIndexCode: this.info.sensorCode,
                    }).then((data) => {
                        this.videoDialog = {
                            visible: true,
                            data: data.rtspUrl,
                            title: this.info.sensorName,
                            cameraIndexCode: this.info.sensorCode,
                        };
                        // console.log(this.videoDialog, "this.videoDialog,this.videoDialog");
                    });
                    return;
                }
                this.infoDialog = {
                    visible: true,
                    data: this.info,
                };
            }
        },
        async getLatestDataByMonitorCode() {
            const res = await getLatestDataByMonitorCode({ monitorCode: this.info.monitorCode });
            this.tableInfo = [
                {
                    label: "测点类型",
                    value: res.monitorTypeName,
                },
                {
                    label: "测点名称",
                    value: res.monitorName,
                },
                {
                    label: "测点编号",
                    value: res.monitorCode,
                },
                {
                    label: "采集时间",
                    value: res.theDate,
                },
                ...Object.entries(res.data).map(([key, value]) => ({
                    label: key,
                    value,
                })),
            ];
        },
    },
};
</script>

<style lang="scss">
.divpoint-img-box {
    &.z1 {
        z-index: 1;
    }
    .divpoint-img-normal {
        display: inline-block;
    }
}
.divpoint-img-table {
    position: absolute;
    bottom: 125%;
    left: 50%;
    margin-left: -200px;
    background: #fff;
    width: 400px;
    color: #333;
    font-size: 15px;
    border-radius: 2px;
    padding: 10px;
}
.divpoint-img {
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.divpoint-img-table {
    table {
        width: 100%;
        border-collapse: collapse;
        line-height: 25px;
    }
    td {
        border: 1px solid #aaa;
        text-align: center;
        word-wrap: break-word;
        word-break: normal;
        max-width: 200px;
    }
}

.cesium-popup-tip {
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -8.5px;
    background: #fff;
    box-shadow: 0 3px 14px rgb(0, 0, 0);
    width: 17px;
    height: 17px;
    padding: 1px;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    z-index: -1;
}
</style>
